<template>

<el-dialog
  :visible.sync="dialogVisible"
   width="30%"
   center>
  <div class="vacation">
  
    <section class="view">
  
 
      <h1 class="my-vacation">
  
        我的假期
  
      </h1>
  
      <!-- 展开的内容 -->
  
  
  
      <div class="view-content">
  
        <div>
  
          <h1 class="type">
  
            <span>年假</span>
  
          </h1>
  
  
  
          <div v-for='(k,i) in res.yearLeave'>
  
  
  
            <h2 class="title">
  
  
  
              <span>{{k.years}}{{k.leave_type}}</span>
  
  
  
              <span class="title-subhead" :class='{"subhead-warning":active==1}'>有效期{{k.end_dt}}</span>
  
  
  
            </h2>
  
  
  
            <p class="remain type1">
  
  
  
              <span>共{{k.sum_days}}天</span>
  
  
  
              <span>剩余{{k.rest_days}}天</span>
  
  
  
              <span style='margin-left:8px'>已休{{k.sum_days - k.rest_days}}天</span>
  
  
  
            </p>
  
  
  
            <div class="range">
  
              <span :style='"width:"+(100-((k.rest_days/k.sum_days)*100))+"%"'></span>
  
            </div>
  
  
  
          </div>
  
  
          <h1 class="type">
  
            <span>病假</span>
  
          </h1>
  
  
          <div v-for='(k,i) in res.sickLeave'>
  
  
            <div v-if='k.leave_type=="全薪病假"'>
  
              <h2 class="title">
  
  
                <span style='font-weight:normal'>{{k.leave_type}}</span>
  
  
                <span class="title-subhead" :class='{"subhead-warning":active==1}'>有效期{{k.end_dt}}</span>
  
  
              </h2>
  
  
              <p class="remain type1">
  
  
                <span>共{{k.sum_days}}天</span>
  
  
                <span>剩余{{k.rest_days}}天</span>
  
  
                <span style='margin-left:8px'>已休{{k.sum_days - k.rest_days}}天</span>
  
  
              </p>
  
              <div class="range">
  
                <span :style='"width:"+(100-((k.rest_days/k.sum_days)*100))+"%"'></span>
  
              </div>
  
  
            </div>
  
            <div v-if='k.leave_type=="有薪病假"' style='padding-top:12px'>

              <h2 class="title youxin-title" style='font-weight:normal'>
  
                <span>{{k.leave_type}}</span>


                <span>剩余{{k.rest_days}}天</span>   
              </h2>


            </div>
  
          </div>
  
        </div>
  
      </div>
  
  
    </section>
  
  
  
  </div>


  <span slot="footer">
    <el-button type="primary" @click="dialogVisible = false">关 闭</el-button>
  </span>
</el-dialog>
  
</template>

<script>
  import Vue from "vue"
  
  import {

     Dialog,
  
  } from "element-ui";

  Vue.use(Dialog)

  export default {
  
    data() {
  
      return {
  
        active: 1,
  
        res: '',

        dialogVisible:false,

        emplid:''

      }
  
    },
  
    mounted() {
      Bus.$on('vacationData', data => {
        console.log(data,"vacation");
        this.dialogVisible = data.dialogVisible
        this.emplid = data.emplid
      })
      this.sendAjax()
    },
  
    methods: {
  
      sendAjax() {
  
        let params = {
  
          
          emplid: this.emplid,
  
          leaveType: '假期',
  
          pageNum: 1,
  
          pageSize: 6
        }
  
        this.Axios.Post(this.URL.getLeaveaManagerBylist.url, params)
  
          .then((res) => {
  
            let data = res.data.datas;
  
            data.sickLeave.reverse();
  
            this.res = data;
  
          })
  
      }
  
    },
  
  };
</script>

<style lang='less'>
.el-dialog__header {
  padding:0!important;
}
.el-dialog__body {
    padding:0!important;
}

.el-dialog__headerbtn {
  position:absolute;
  top:15px;
  right:20px;
  z-index:878;
}
  .vacation {
  
    width: 100%;
  
    .view {
  
      background-color: #fff;
  
      position: relative;
  
      .my-vacation {
  
        text-align: center;
  
        padding: 12px 0;
  
        border-bottom: 1px solid #f2f2f2;
  
        font-size: 18px;
  
        font-weight: normal;
  
        letter-spacing: 1px;
  
      }
  
      .type {
  
        text-align: center;
  
        margin-top: 50px;
  
        color: #666;
  
        font-weight: normal;
  
        font-size: 18px;
  
        position: relative;
  
        &::before {
  
          content: '?';
  
          position: absolute;
  
          left: 50%;
  
          top: 50%;
  
          margin-top: -10px;
  
          background-color: #89ABC6;
  
          font-size: 14px;
  
          border-radius: 50%;
  
          height: 16px;
  
          line-height: 16px;
  
          width: 16px;
  
          margin-left: 30px;
  
          color: #fff;
  
        }
  
      }
  
      .view-content {
  
        margin-top: 10px;
  
        width: 60%;
  
        margin: 0 auto;

        .youxin-title {
          display:flex;
          justify-content:space-between;
          span:last-of-type {
            color:#26a2ff;
          }
        }
  
        .title {
  
          margin-top: 25px;
  
          padding: 8px 0;
  
          span:first-of-type {
  
            font-size: 15px;
  
          }
  
          .title-subhead {
  
            color: #669966;
  
            margin-left: 6px;
  
            font-size: 12px;
  
          }
  
          .subhead-warning {
  
            color: #cc0000 !important;
  
          }
  
        }
  
        .remain {
  
          padding-top: 15px;
  
          font-size: 12px;
  
          overflow: hidden;
  
          span:nth-of-type(2) {
  
            float: right;
  
            text-align: right;
  
            color: #26a2ff;
  
          }
  
        }
  
      }
  
      .range {
  
        height: 8px;
  
        width: 100%;
  
        margin-top: 6px;
  
        border-radius: 5px;
  
        position: relative;
  
        background-color: #26a2ff;
  
        span {
  
          background-color: #CCCCFF;
  
          height: 8px;
  
          width: 70%;
  
          border-radius: 5px;
  
          position: absolute;
  
          left: 0;
  
          top: 0;
  
          &::before {
  
            content: '';
  
            position: absolute;
  
            right: -8px;
  
            top: 50%;
  
            background-color: #fff;
  
            width: 10px;
  
            height: 10px;
  
            margin-top: -6px;
  
            border: 1px solid #26a2ff;
  
            border-radius: 50%;
  
          }
  
        }
  
      }
  
    }
  
    .detail {
  
      margin-top: 10px;
  
      padding-bottom: 100px;
  
      li {
  
        margin-top: 10px;
  
        background-color: #fff;
  
      }
  
      .detail-title {
  
        padding: 8px;
  
        font-weight: normal;
  
        overflow: hidden;
  
        p {
  
          display: inline-block;
  
          float: right;
  
          color: grey;
  
          font-size: 12px;
  
          margin-top: 2px;
  
        }
  
        span:first-of-type {
  
          position: relative;
  
          margin-left: 16px;
  
          &::before {
  
            content: '';
  
            width: 6px;
  
            height: 6px;
  
            border-radius: 50%;
  
            background-color: #26a2ff;
  
            position: absolute;
  
            left: -14px;
  
            top: 50%;
  
            margin-top: -3px;
  
            ;
  
          }
  
        }
  
        span:last-of-type {
  
          margin-left: 15px;
  
        }
  
      }
  
      .detail-content {
  
        border-top: #f4f4f4 solid 1px;
  
        padding: 14px 0 14px 12px;
  
      }
  
    }
  
    .apply {
  
      position: fixed;
  
      bottom: 0;
  
      left: 0;
  
      background: #fff;
  
      width: 100%;
  
      padding: 12px 0;
  
      span {
  
        display: block;
  
        width: 200px;
  
        font-size: 16px;
  
        margin: 0 auto;
  
        padding: 10px 0;
  
        border-radius: 28px;
  
        text-align: center;
  
        background-color: #26a2ff;
  
        color: #fff;
  
        cursor: pointer;
  
      }
  
    }
  
  }
</style>